import React, { Component } from 'react';
import Tag from 'antd';

class Mod extends Component {

  static defaultProps = {
    name: '',
    intro: '这个人很懒，还没有写呢！',
    lis: []
  }

  render(){
    const {
      imgUrl,
      name,
      tags,
      time,
      intro,
      lis
    } = this.props;


    return (
      <div className="mod__container">
          <div className="mod-inner">
            <div className="mod-cover">
                { imgUrl ? <img className="mod-title" src={imgUrl}/> :  <h1>{ name }</h1> }
            </div>
              <div className="mod-body">
                  {tags.length > 0 && (
                    <React.Fragment>
                      {
                        tags.map(item => {
                          return <Tag color={item.color}>{item.text}</Tag>
                        })
                      }
                    </React.Fragment>
                  )}
                  <div className="mod-description">{intro}</div>
                  <div className="mod-page-list">
                      <span>{time}</span>
                      <div className="mod-view">
                        <ul>
                          {
                            lis.map((item, id) => {
                              return (
                                <li key={id}>
                                  {/* <Link href={item.href}><a><span className={`${item.name}`}></span></a></Link> */}
                                </li>
                              )
                            })
                          }
                        </ul>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    )
  }
}

export default Mod;
